<template>
	<!-- 分类 -->
	<view class="content">
		<view class="left-aside">
			<view v-for="(item,index) in Renderarray" :key="item.id" class="f-item" :class="Id==index ? 'active' : ''"
				@click="tabtap(index)">
				{{item.title}}
			</view>
		</view>
		<view  class="right-aside">
			<view v-for="(item,index) in Renderarray[Id].childrenList" :key="index" class="s-list" >
				<text class="s-item">{{item.title}}</text>
				<view class="t-list">
					<view @click="navToList" class="t-item" :data-list='items' v-for="(items,index) in item.childrenList" :key='index'>
						<image :src="items.picUrl"></image>
						<text>{{items.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Id: 0,
				Renderarray: [],
			}
		},
		onLoad() {
			let that = this
			this.Id = 0
			uni.request({
				url: 'http://192.168.1.54:8081/m.api',
				data:{
					"_gp":"category",
					"_mt":"categoryList"
				},
				success: function(res) {
					that.Renderarray = res.data.data
				}
			}) 
		},
		onShow() {
			// if (uni.getStorageSync('accessToken') == '') {
			// 	uni.showModal({
			// 		title: '登录提示',
			// 		content: '您尚未登录，是否立即登录',
			// 		success: function(res) {
			// 			if (res.confirm) {
			// 				uni.navigateTo({
			// 					url: '../long/long'
			// 				})
			// 				return
			// 			} else if (res.cancel) {
			// 				// console.log('用户点击取消');
			// 			}
			// 		}
			// 	});
			// }
		},
		methods: {
			tabtap(index) {
				// console.log(index)
				this.Id = index;
			},
			navToList(item) {
				uni.navigateTo({
					url: '/pages/Productlist/Productlist?fid='+item.currentTarget.dataset.list.id+'&num=1',
				})
			}
		}
	}
</script>

<style >
	page,
	.content {height: 100%;background-color: #f8f8f8;}
	.content {display: flex;}
	.left-aside {flex-shrink: 0;width: 200rpx;height: 100%;background-color: #fff;}
	.f-item {display: flex; align-items: center; justify-content: center; width: 100%; height: 100rpx; font-size: 28rpx; color: #606266; position: relative;}
	.f-item.active { color: #fa436a; background: #f8f8f8;}
	/* 伪类样式 */
	.f-item.active:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 36upx; width: 8upx; background-color: #fa436a; border-radius: 0 4px 4px 0; opacity: .8;}
	.right-aside { flex: 1; overflow: hidden; padding-left: 20upx;}
	.s-item { display: flex; align-items: center; height: 70rpx; padding-top: 8rpx; font-size: 28rpx; color: #303133;}
	.t-list { display: flex; flex-wrap: wrap; width: 100%; background: #fff; padding-top: 12rpx;}
	.t-list:after { content: ''; flex: 99; height: 0;}
	.t-item { flex-shrink: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 176rpx; font-size: 26rpx; color: #666; padding-bottom: 20rpx;}
	.t-item image {width: 140rpx;height: 140rpx;}
</style>
